<template>
  <div>
    <card class="card">
      <el-select
        v-model="searchobj.select"
        placeholder="位置"
        @change="selectChange"
      >
        <el-option
          v-for="item in select"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div style="width: 40px; display: inline-block"></div>
      <el-select
        v-model="searchobj.options"
        placeholder="请选择"
        @change="optionChange"
      >
        <el-option
          v-for="item in status"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div style="float: right; margin-right: 30px">
        <button-cn text="查询" @myclick="query"></button-cn>
      </div>
    </card>

    <div style="height: 100px; line-height: 100px; width: 95%; margin: 0 auto">
      <span> 广告列表 </span>
      <button-cn
        text="新增banner"
        @myclick="pushBanner"
        style="float: right; margin-right: 45px"
      ></button-cn>
    </div>
    <card>
      <el-table :data="banner" stripe style="width: 100%">
        <el-table-column label="显示位置" align="center">
          <template slot-scope="scope">
            {{ Displaylocation(scope.row.banner_dispaly) }}
          </template>
        </el-table-column>
        <el-table-column label="图片数量" align="center">
          <template slot-scope="scope">
            {{ scope.row.banner_img.length }}
          </template>
        </el-table-column>
        <el-table-column label="位置名称" align="center">
          <template slot-scope="scope">
            {{ Displaylocation(scope.row.banner_dispaly) + "banner" }}
          </template>
        </el-table-column>
        <el-table-column prop="banner_describe" label="描述" align="center">
          <template slot-scope="scope">
            <div
              style="
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.banner_describe }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="banner_url" label="跳转链接" align="center">
          <template slot-scope="scope">
            <div
              style="
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.banner_url }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="banner_starttime"
          label="有效日期"
          align="center"
        >
        </el-table-column>

        <el-table-column label="状态 " align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-show="scope.row.banner_state == 1"
              >在线</el-tag
            >
            <el-tag type="error" v-show="scope.row.banner_state == 2"
              >离线</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作 " align="center">
          <template slot-scope="scope">
            <button-cn text="编辑" @myclick="editBtn(scope.row)"></button-cn>
          </template>
        </el-table-column>
      </el-table>
    </card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 编辑 -->

    <alert-cn
      title="编辑"
      :alertShow="editLisShow_box"
      rightText="确认"
      leftText="取消"
      @clone="editLisShow_box = false"
      @confirm="idetSbumit"
      @cancel="editLisShow_box = false"
    >
      <el-form :model="editform" label-width="80px">
        <el-form-item label="广告图片">
          <img
            :src="item"
            alt=""
            v-for="(item, index) of editform.banner_img"
            :key="index"
            style="width: 100px"
          />
        </el-form-item>

        <el-form-item label="显示位置">
          <!-- <el-input v-model="editform.banner_dispaly"> -->
          <el-select
            v-model="editform.banner_dispaly"
            placeholder="请选择"
            @change="idetChnage"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="editform.banner_starttime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="editform.banner_endtime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="editform.banner_describe"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接">
          <el-input v-model="editform.banner_url"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="editform.banner_state"
            placeholder="请选择"
            @change="statustChnage"
          >
            <el-option
              v-for="item in optionstatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </alert-cn>
    <!-- 新增 -->
    <alert-cn
      title="新增banner"
      :alertShow="editListShow"
      rightText="发布"
      leftText="取消"
      @clone="clone"
      @confirm="submit"
      @cancel="clone"
    > v  
      <el-form :model="pushBannerObject" label-width="120px">
        <el-form-item label="上传图片">
          <imgupload
            imgurl="http://management.api.asmm.vip/index.php/advertising/imgupload"
            @imgsucc="imgsucc"
            ref="imgupload"
          ></imgupload>
        </el-form-item>
        <el-form-item label="显示位置">
          <el-select
            v-model="pushBannerObject.dispaly"
            placeholder="请选择"
            @change="showposition"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间和结束时间">
          <!-- 日历 -->
          <el-date-picker
            @change="pickerChange"
            v-model="picker"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd-HH-mm"
            value-format="yyyy-MM-dd-HH-mm"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="pushBannerObject.describe"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="pushBannerObject.url"></el-input>
        </el-form-item>
      </el-form>
    </alert-cn>
  </div>
</template>

<script>
import {
  bannerList,
  uploadimg,
  detailsbanner,
  modifyadvertising,
  addadvertisingFun,
} from "@/request/index";

import myDialog from "../../components/from/dialog.vue";
import AlertCn from "../../components/from/alert-cn.vue";
import imgupload from "../../components/from/imgupload.vue";
import Card from "../../components/from/card.vue";
import ButtonCn from "@/components/from/button-cn.vue";
export default {
  data() {
    return {
      position: "",
      imgsuccess: [],
      editLisShow_box: false,
      picker: "picker",
      bannerTitle: "",
      action: this.$imgupload + "/index.php/advertising/imgupload",
      imgData: { imgFile: File },
      imageUrl: "",
      editListShow: false,
      banner: [],
      dispaly: null,
      state: 1,
      count: 10,
      page: 1,
      editform: {},
      total: 0,
      dialogShow: true,
      pushBannerObject: {
        img: "",
        dispaly: "",
        starttime: "",
        endtime: "",
        describe: "",
        url: "",
        uid: "",
      },
      options: [
        {
          value: 1,
          label: "首页顶部",
        },
        {
          value: 2,
          label: "科学育儿顶部",
        },
        {
          value: 3,
          label: "个人中心中间",
        },
        {
          value: 4,
          label: "品牌大使顶部",
        },
      ],
      select: [
        {
          value: 1,
          label: "首页顶部",
        },
        {
          value: 2,
          label: "科学育儿顶部",
        },
        {
          value: 3,
          label: "个人中心中间",
        },
        {
          value: 4,
          label: "全部",
        },
      ],
      status: [
        {
          value: 1,
          label: "开启状态",
        },
        {
          value: 2,
          label: "关闭",
        },
        {
          value: 3,
          label: "全部",
        },
      ],
      optionstatus: [
        {
          value: 1,
          label: "开启",
        },
        {
          value: 2,
          label: "关闭",
        },
      ],
      searchobj: {
        select: 1,
        options: 1,
      },
      pushbannerimg: "",
    };
  },

  created() {
    this.bannerMethods();
    console.log(
      JSON.parse(
        '["http:\\/\\/m.asmm.vip\\/upload\\/img\\/amc.png","http:\\/\\/m.asmm.vip\\/upload\\/img\\/amc.png"]'
      )
    );
  },
  mounted() {},
 
  components: {
    myDialog,
    AlertCn,
    imgupload,
    Card,
    ButtonCn,
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.count = val;
      this.bannerMethods();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.bannerMethods();
    },
    clone() {
      this.editListShow = false;
      for(var item in this.pushBannerObject) {
        this.pushBannerObject[item] =""
      }
      this.picker = "";
    },
    showposition(status) {
      this.position = status;
    },
    imgsucc(img, imgdata) {
      this.imgsuccess = img;
    },
    imgpushbanner(img) {
      this.pushbannerimg = img;
    },
    submit() {
      var id = window.sessionStorage.getItem("id");

      addadvertisingFun(
        this.imgsuccess.toString(),
        this.position,
        this.picker[0],
        this.picker[1],
        this.pushBannerObject.describe,
        this.pushBannerObject.url,
        id
      ).then((res) => {
        // console.log(res);
        if (res.code != "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.editListShow = false;
        this.$refs.imgupload.imgdata = [];
        this.$refs.imgupload.status = false;
        this.clone();
        this.bannerMethods();
      });
    },
    draft() {
      // this.$message.error('保存为草稿失败')
      this.editListShow = false;
    },
    pushBanner() {
      this.editListShow = true;
    },
    idetSbumit() {
      modifyadvertising(
        this.editform.banner_starttime,
        this.editform.banner_endtime,
        this.editform.banner_state,
        this.editform.banner_id
      ).then((res) => {
        // console.log(res);
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.editLisShow_box = false;
        this.bannerMethods();
      });
    },
    idetChnage(status) {
      this.editform.banner_dispaly = status;
    },
    imgJsonChang(banner_img) {},
    statustChnage(status) {
      console.log(status);
      this.editform.banner_state = status;
    },
    selectChange(select) {
      // console.log(select);
      this.searchobj.select = select;
    },
    optionChange(option) {
      this.searchobj.options = option;
    },
    // 查询
    query() {
      this.page = 1;
      this.count = 10;
      if (this.searchobj.select == 4 || this.searchobj.options == 3) {
        this.bannerMethods();
        this.$message.success("数据查询成功");
      } else {
        bannerList(
          this.searchobj.select,
          this.searchobj.options,
          this.count,
          this.page
        ).then((res) => {
          console.log(res);
          if (res.code !== "0000")
            return this.$message.error(res.msg || "代码出错！！！！");
          this.$message.success(res.msg);
          this.total = res.data.total;
          this.banner = res.data.data;
        });
      }
    },
    editBtn(item) {   
      console.log(item);
      this.editLisShow_box = true;
      detailsbanner(item.banner_id).then((res) => {
        console.log(res);
        if (res.code !== "0000")
          return this.$message.error(res.msg || "代码出错！！！！");
        this.editform = res.data[0];
      });
    },
    // 时间日期
    pickerChange(time, day) {
      console.log(this.picker);
    },
    handleChange(file, fileList) {
      console.log(file.raw);
      // console.log("file", URL.createObjectURL(file.raw));
      this.imgA = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("仅支持jpg，png格式的图片！");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    uploadFile(item) {
      var fromData = [
        "imgFile",
        item.file.uid,
        item.file.lastModified,
        item.file.lastModifiedDate,
        item.file.name,
        item.file.size,
        item.file.type,
        item.file.webkitRelativePath,
      ];
      uploadimg(fromData).then((res) => {
        console.log(res);
      });
    },

    // 显示位置
    Displaylocation(loaction) {
      var position;
      switch (loaction) {
        case 1:
          position = "首页顶部";
          break;
        case 2:
          position = "科学育儿顶部";
          break;
        case 3:
          position = "个人中心中间";
          break;
        case 4:
          position = "品牌大使顶部";
          break;
        default:
          "出错";
      }
      return position;
    },
    pushnewBanner() {
      this.dialogShow = true;
    },
    bannerMethods() {
      const { dispaly, state, count, page } = this;
      bannerList(dispaly, state, count, page).then((res) => {
        console.log(res, "00000000001");
        if (res.code !== "0000")
          return this.$message.error(res.msg || "代码出错！！！！");
        this.total = res.data.total;
        this.banner = res.data.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
// .card ::v-deep .el-input--suffix .el-input__inner {
//   padding-right: 30px;
//   border-radius: 20px !important;
// }
::v-deep .el-select .el-input__inner {
  cursor: pointer;
  padding-right: 35px;
  border-radius: 20px !important;
}
</style>
